<template>
  <el-menu
    :default-active="route.path"
    class="ele-menu"
    :class="theme ? theme : ''"
    :background-color="menuBackground"
    :text-color="menuForeground"
    :unique-opened="uniqueOpened"
    @select="handleSelect"
  >
    <template
      v-for="menu in routes"
      :key="menu.path"
    >
      <ele-menu-item
        v-if="!menu.meta.hidden"
        :item="menu"
      >
        <template #default="item">
          <slot v-bind="item">
            <i
              v-if="item.meta?.icon"
              class="ele-menu-icon"
              :class="item.meta.icon"
            />
            <span
              v-if="item.meta?.title"
              class="ele-menu-title"
            >
              {{ item.meta.title }}
            </span>
            <el-badge
              v-if="item.meta.badge != null"
              :value="item.meta?.badge"
              class="ele-menu-item-badge"
            />
          </slot>
        </template>
      </ele-menu-item>
    </template>
  </el-menu>
</template>
<script setup lang="ts">
import { computed, defineProps, toRaw, toRefs } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMenu, ElBadge } from 'element-plus'
import { useCurrentRoutes } from '../composables/index'
import { checkUrl } from '../utils/index'
import EleMenuItem from './MenuItem.vue'
import type { IRouteRecordRaw } from '../types/index'

const props = defineProps({
  routes: Array,
  uniqueOpened: {
    type: Boolean,
    default: true,
  },
  theme: {
    type: String,
    default: 'white',
  },
})

const { theme, uniqueOpened } = toRefs(props)
const route = useRoute()
const router = useRouter()
const routes = useCurrentRoutes(props)

const menuBackground = computed(() => {
  return theme && theme.value === 'black' ? '#191a23' : '#ffffff'
})

const menuForeground = computed(() => {
  return theme && theme.value === 'black' ? '#ffffff' : '#191a23'
})

function handleSelect(path: string) {
  if (checkUrl(path)) {
    window.open(path)
  } else {
    router.push(path)
  }
}
</script>

<style lang="postcss">
.ele-menu.el-menu {
  border-right: 0;
}
.ele-menu.el-menu .el-submenu__title * {
  vertical-align: 0% !important;
}
.ele-menu.el-menu .el-menu-item,
.ele-menu.el-menu .el-submenu__title i,
.ele-menu.el-menu .el-submenu__title span {
  font-size: 13.6px !important;
  color: #515a6e !important;
}
.ele-menu.el-menu.white .el-menu-item.is-active {
  border-right: 2px solid var(--primary-color) !important;
  color: var(--primary-color) !important;
  background-color: var(--second-color) !important;
}
.ele-menu.el-menu.white .el-menu-item.is-active:hover {
  border-right: 2px solid var(--primary-color) !important;
  color: var(--primary-color) !important;
  background-color: var(--second-color) !important;
}
.ele-menu.el-menu .el-menu-item:hover {
  background-color: transparent !important;
  color: var(--primary-color) !important;
}
.ele-menu.el-menu .el-submenu__title:hover {
  background-color: transparent !important;
}
.ele-menu.el-menu.black .el-menu-item,
.ele-menu.el-menu.black .el-submenu__title i,
.ele-menu.el-menu.black .el-submenu__title span {
  font-size: 13.6px;
  color: hsla(0, 0%, 100%, 0.7) !important;
}
.ele-menu.el-menu.black .el-submenu.is-active > .el-submenu__title * {
  color: white !important;
}
.ele-menu.el-menu .ele-menu-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 21px;
  vertical-align: middle;
  text-align: center;
  margin-right: 8px;
}
.ele-menu.black .el-submenu .el-menu {
  background-color: #000c17 !important;
}
.ele-menu.black .el-submenu .el-menu .el-menu-item {
  background-color: #000c17 !important;
}
.ele-menu.black .el-submenu .el-menu .el-menu-item:first-child {
  margin-top: 4px;
}
.ele-menu.black .el-submenu .el-menu .el-menu-item:last-child {
  margin-bottom: 4px;
}
.ele-menu.black .el-submenu .el-menu .el-menu-item.is-active {
  background-color: var(--primary-color) !important;
  color: white !important;
}
.ele-menu .el-submenu__icon-arrow {
  font-weight: 500 !important;
  font-size: 12px !important;
}
.ele-menu.el-menu .ele-menu-item-badge {
  position: absolute;
  right: 20px;
}
.ele-menu.el-menu .ele-menu-item-badge .el-badge__content {
  line-height: 15.4px;
}
</style>
